<template>
  <div>
    <div class="income-div-div">
      <el-card style="width: 100%;height: 600px;" >

        <div style="vertical-align: top">
        <div style="display: inline-block;">
        <span style="margin-right: 10px">单据操作: </span>
          <el-autocomplete
              style="width: 250px;"
              class="document_input1"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="请输入单据号"
              :trigger-on-focus="false"
              @select="handleSelect"
          ></el-autocomplete>
        </div>

        <div style="display: inline-block">
        <span class="demonstration">单据日期: </span>
        <el-date-picker
            class="bill_date"
            style="padding: 0px 10px;width: 250px;"
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker>
        </div>

        <div style="display: inline-block;">
            <span style="margin-right: 10px">来往单位: </span>
          <el-autocomplete
              style="width: 250px;"
              class="units-input01"
              v-model="state2"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
          ></el-autocomplete>
        </div>


        <div style="display: inline-block;margin-bottom: 15px">
          <input type="button" value="查询" @click="select()" class="div-select-button-01">
          <input type="button" value="重置" @click="reset()" class="div-reset-button-01">
          <input type="button" :value="upfold" @click="unfold()" class="div-unfold-button-01">
          <i :class="upfoldIcon"></i>
        </div>

        <div id="dv" style="display:none;">

        <div style="display:inline-block;">
            <span style="margin-right: 10px">财务人员: </span>
          <el-autocomplete
              style="width: 250px;"
              class="div-finance-person-01"
              v-model="state3"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
          ></el-autocomplete>
          </div>

        <div style="display: inline-block;">
            <span>操作员: </span>
          <el-autocomplete
              style="width: 250px;"
              class="div-operator-01"
              v-model="state4"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              placeholder="请输入内容"
              @select="handleSelect"
          ></el-autocomplete>
          </div>

        <div style="display: inline-block;">
            <span style="margin-right: 10px">收入账户: </span>
          <el-autocomplete
              style="width: 250px;"
              class="div-account-01"
              v-model="state5"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
          ></el-autocomplete>
          </div>

          <div style="display: inline-block;">
            <span style="margin-right: 10px">单据状态: </span>
            <el-autocomplete
                style="width: 250px;"
                class="div-states-01"
                v-model="state6"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
            ></el-autocomplete>
          </div>
        </div>
        </div>

          <div style="margin-top:20px;margin-bottom: 10px">
            <button @click="dialogVisible = true" class="div-new-button-01">新增</button>
            <input type="button" value="批量操作" @click="bulkOperation()" class="div-batch-operation-button-01">
          </div>

        <!--新增按钮页面-->
        <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
            width="90%"
            :before-close="handleClose">

          <div style="margin: 0 auto;height: 500px;">
          <div style="display: inline-block;">
            <span style="color: red">*</span>
            <span style="margin-right: 10px">来往单位: </span>
            <el-autocomplete
                class="units-input01"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
            ></el-autocomplete>
          </div>

          <div style="display: inline-block;">
            <span style="color: red">*</span>
            <span style="margin-right: 10px">来往单位: </span>
            <el-autocomplete
                class="units-input01"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
            ></el-autocomplete>
          </div>

          <div style="display: inline-block;">
            <span style="color: red">*</span>
            <span style="margin-right: 10px">来往单位: </span>
            <el-autocomplete
                class="units-input01"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
            ></el-autocomplete>
          </div>

          <div style="display: inline-block;">
            <span style="margin-right: 10px">来往单位: </span>
            <el-autocomplete
                class="units-input01"
                v-model="state2"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
            ></el-autocomplete>
          </div>

            <div style="margin-top: 15px">
              <button @click="newRow" class="div-newRow-button-02">+新增行</button>
            </div>

            <div>
              <template>
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                  <el-table-column
                      type="selection"
                      width="40%">
                  </el-table-column>
                  <el-table-column
                      label="收入项目"
                      width="400%">
                    <template slot-scope="scope">

                      <el-autocomplete
                        style="width: 100%;display: inline-block"
                        class="units-input01"
                        v-model="state2"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        :trigger-on-focus="false"
                        @select="handleSelect"
                    ></el-autocomplete>


                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="money"
                      label="金额"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="address"
                      label="备注"
                      show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

          <el-table
              :data="tableData"
              border
              style="width: 100%;overflow: scroll">
            <el-table-column
                fixed="left"
                prop="id"
                label="ID"
                width="100%">
            </el-table-column>
            <el-table-column
                prop=""
                label="来往单位"
                width="100%">
            </el-table-column>
            <el-table-column
                prop="finence-person"
                label="财务人员"
                width="100%">
            </el-table-column>
            <el-table-column
                prop="number"
                label="单据编号"
                width="300%">
            </el-table-column>
            <el-table-column
                prop="date"
                label="单据日期"
                width="200%">
            </el-table-column>
            <el-table-column
                prop="operate"
                label="操作员"
                width="100%">
            </el-table-column>
            <el-table-column
                prop="money"
                label="收入金额"
                width="100%">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注"
                width="200%">
            </el-table-column>
            <el-table-column
                prop="state"
                label="状态"
                width="100%">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-card>
    </div>
  </div>
</template>


<script>


export default {
  data() {
    return {
      dialogVisible: false,
      restaurants: [],
      state1: '',
      state2: '',
      state3: '',
      state4: '',
      state5: '',
      state6: '',
      upfold:'展开',
      upfoldIcon:'el-icon-arrow-down',
      tableData: [{
        date: '',
        name: '',
        address: '',
      },]
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

    selectNew() {
      $('#showdiv').show();  //显示弹窗
      $('#cover').css('display','block'); //显示遮罩层
      $('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
    },
// 关闭弹窗
    closeWindow() {
      $('#showdiv').hide();  //隐藏弹窗
      $('#cover').css('display','none');   //显示遮罩层
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    select(){
      //查询按钮
    },
    reset(){
     //重置按钮
    },
    unfold(){
     //展开按钮
      if (this.upfold === "展开") {
        // 如果是隐藏，那么点击后通过div盒子的id修改css样式，将display属性值改为none
        document.getElementById("dv").style.display = "block";
        //this关键字获取的是当前对象  通过this关键字来修改button的value值
        this.upfold = "收起";
        this.upfoldIcon="el-icon-arrow-up"
      } else if(this.upfold === "收起") {
        // 如果是显示，那么点击后通过div盒子的id修改css样式，将display属性值改为block
        document.getElementById("dv").style.display = "none";
        //this关键字获取的是当前对象  通过this关键字来修改button的value值
        this.upfold = "展开";
        this.upfoldIcon="el-icon-arrow-down"
      }

    }
},
  mounted() {
    this.restaurants = this.loadAll();
  },
}
</script>

<style>

.income-div-div{
  margin: 5px 5px;

}
.document_input1{
  display: inline-block;
  margin-right: 20px;

}
.bill_date{
  display: inline-block;
  margin-right: 30px;

}
.units-input01{
  margin-right: 20px;
}
.div-select-01{

}

.div-select-button-01{
  cursor:pointer;
  background-color: #1890ff;
  color: white;
  width: 70px;
  height: 35px;
  border: #1890ff;
  border-radius: 6px;
}
.div-select-button-01:hover{
  background-color: #40a9ff;
}
.div-reset-button-01{
  cursor:pointer;
  background-color: white;
  color: black;
  width: 70px;
  height: 35px;
  border: 1px solid darkgray;
  border-radius: 6px;
  margin:0px 10px;
}
.div-reset-button-01:hover{
  border: 1px solid  #1890ff;
  color: #1890ff;
}
.div-unfold-button-01{
  cursor:pointer;
  color: #1890ff;
  background-color: white;
  border: white;
}
.div-finance-person-01{
  margin-right: 35px;
}
.div-operator-01{

margin-right: 30px;
}
.div-account-01{
margin-right: 20px;
}
.div-states-01{

}
.div-new-button-01{
  cursor:pointer;
  background-color: #1890ff;
  color: white;
  width: 100px;
  height: 35px;
  border: #1890ff;
  border-radius: 6px;
}
.div-new-button-01:hover{
  background-color: #40a9ff;
}
.div-newRow-button-02{
  cursor:pointer;
  background-color: #1890ff;
  color: white;
  width: 90px;
  height: 32px;
  border: #1890ff;
  border-radius: 6px;
}
.div-newRow-button-02:hover{
  background-color: #40a9ff;
}
.div-batch-operation-button-01{
  cursor:pointer;
  background-color: white;
  color: black;
  width: 100px;
  height: 35px;
  border: 1px solid darkgray;
  border-radius: 6px;
  margin-left: 10px;
}
.div-batch-operation-button-01:hover{
  border: 1px solid  #1890ff;
  color: #1890ff;
}
</style>
